@charset "utf-8";

/***字体大小***/
$font-35:35px;
$font-26:26px;
$font-24:24px;
$font-22:22px;
$font-20:20px;
$font-18:18px;
$font-17:17px;
$font-16:16px;
$font-14:14px;
$font-12:12px;

/***颜色值***/
$gray:#838383;
$qgray:#939597;
$gray2:#929292;
$c7:#7c7c7c;
$ea:#eae9e9;
$qgreen:#2ce4ca;
$green2:#11afa1;
$yellow:#ffd205;
$blue:#08cacc;
$hblue:#08c5c8;
$bblue:#11b2a3;

/***宽度值***/
$w-25:1.7%;
$w-35:2.4%;
$w-295:20.5%;
$h-80:80px;
$h-120:120px;
$h-338:338px;
$h-412:412px;
$h-445:445px;
$h-636:636px;

/***元素类型装换***/
@mixin p_inlineb{
    display: inline-block;
}
@mixin p_block{
    display: block;
}
@mixin p_inline{
    display: inline;
}

/**垂直居中**/
@mixin middle{
    vertical-align:middle;
}

/***伪对象***/
@mixin pseudo{
    content:"";
    display: block;
}
/**使行内元素强制换行**/
@mixin newline{
  content: "\A";
  white-space: pre;
}

/**1px的边框**/
@mixin rborder{
    border:1px solid $gray2;
}
/***公共padding值***/
@mixin padd{
    padding: 10px 25px 10px 25px;    
}
/***公共border-radio***/
@mixin radio{
    border-radius: 25px;
}

/***12px的字体***/
@mixin font12{
    font-size: $font-12;
}


/***图片溢出处理***/
@mixin imgoverflow(){
    overflow: hidden;
    text-align: center;
}
img{
    max-width: 100%;
    vertical-align: middle;
}

/**游戏步骤**/
.s_step{
    width:61.67%;
    min-width: 770px;
    height: $h-412;
    margin: 0 auto;
    line-height: $h-412;
    /**右箭头**/
    .font{
        display: inline-block;
        line-height: 345px;
        float: left;
        i{
            font-size:40px;
            color: #dad7d7;
        }
    }
    /***使用方法步骤***/
    .step{
        height: 100%;
        float: left;
        line-height:normal;
        text-align: center;
//      margin: 0 calc(100%/6 - 90px) ;
//      margin: 0 auto;
        &:last-of-type{
            float: right;
            div{
                margin-top:123px;
            }
        }
        &:nth-of-type(odd){
            span:first-of-type{
                margin-top: 30px;
            }
        }
        &:nth-of-type(3){
            margin-left:6.4%;
            margin-right: 3.37%;
            div{
                text-align: right;
                margin-bottom: 14px;
            }
        }
        &:first-of-type{
            margin-right: 5.63%;
            div{
                width: 189px;
                text-align: right;
            }
        }
        div{
           @include imgoverflow;
           margin-top:80px ;
        }
        span{
           &:first-of-type{
               display: inline-block;
               font-size: $font-22;
               color: black;
           }
           &:last-child{
               font-size: $font-14;
               color: $qgray;
               &:before{
                   @include newline;
               }
           } 
        }
    }
}

/****游戏列表公共类****/
.gameList{
    width: 100%;
    height: auto;
    margin:30px 0px 50px 0px;
    li{
        width: 30%;
        height: 445px;
        float: left;
        display: inline-block;
        &:nth-child(3n-1){
            margin-left:25px;
            margin-right: 25px;
        }
        .list{
            width: 100%;
            min-width:230px;
            height: 100%;
            background: #eaeaea;
            border-radius: 5px;
            .list_t{
                width: 100%;
                height: 107px; 
                div{
                   height: 107px; 
                   margin-left:18px;
                   cursor: pointer;
                   &:first-child{
                      float: left;
                      width: 100px;
                      height: 80px;
                      display: inline;
                      text-align: left;
                      margin-top:15px ;
                      span{
                          &:first-child{
                             font-size:$font-24;
                             color: black;
                             margin-left:0px ; 
                          }
                          &::after{
                             @include newline;
                          }
                          font-size:$font-12;
                          color: $c7;
                      }
                      &:hover{
                          
                      }  
                    }
                    &:last-child{
                      width: 25px;
                      float:right;
                      margin: 17px 55px 0px 0px;
                      input{
                          width: 58px;
                          height: 23px;
                          background: $bblue;
                          border-radius: 12px;
                          color: #fff;
                          font-size: $font-14;
                          &:hover{
                              background: $yellow;
                          }
                      }
                      i{
                          font-size:27px;
                          color: #7c96a5;
                          display: inline-block;
                          margin-top: 15px;
                          margin-left: 32px;
                          &:hover{
                              color:red ;
                          }
                      }
                    }  
                }
            }
            .wrapimg{
               width: 100%;
               height: 338px;
               @include imgoverflow; 
               border-radius: 5px;
            }
        }
    }
}

/***margin-top公共类****/
.margin_top{
    margin-top: 105px;
}
.martop_40{
    margin-top: 40px;
}
.margtop_80{
    margin-top: 80px;
}

.marleft{
    margin-left: 0px;
}
.marRight{
    margin-right: 20px;
}
.martop{
    margin-top: 20px;
}

